<template>
	<view class="index">
		<view class="item-wrapper">
			<!-- <view class="title-wrapper">
				<view class="title">
					个人信息
				</view>
			</view> -->
			<view class="form-wrapper">
				<view class="form-item">
					<view class="form-label">
						姓名：
					</view>
					<view class="form-value">
						{{ userInfo.nickName }}
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						部门：
					</view>
					<view class="form-value">
						{{ userInfo.dept.deptName }}
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						岗位：
					</view>
					<view class="form-value">
						{{ post || '-' }}
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						性别：
					</view>
					<view class="form-value">
						{{ userInfo.sex == 1 ? '女':'男' }}
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						手机号码：
					</view>
					<view class="form-value">
						{{ userInfo.phonenumber }}
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						系统账号：
					</view>
					<view class="form-value">
						{{ userInfo.userName }}
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						系统角色：
					</view>
					<view class="form-value" v-if="userInfo.roles">
						{{ role }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				post: '', //岗位
				role: '', //角色
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		onLoad() {
			const roles = this.userInfo.roles.map(item => {
				return item.roleName
			})
			if (roles) {
				this.role = roles.join()
			}
			if (this.userInfo.posts) {
				const posts = this.userInfo.posts.map(item => {
					return item.postName
				})
				if (posts) {
					this.post = posts.join()
				}
			}

		},
		methods: {
			logout() {
				uni.showModal({
					title: '温馨提示',
					content: '是否确定退出？',
					success: (e) => {
						if (e.confirm) {
							uni.setStorageSync('token', '')
							uni.reLaunch({
								url: '/pages/login/index'
							})
						}
					}
				})
			}
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;
		overflow: auto;

		.eCode-wrapper {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #ffffff;
			margin: 10upx 0;
			padding: 40upx;

			.user-info {
				margin-top: 30upx;

				.info {
					margin-top: 20upx;
				}
			}
		}

		.item-wrapper {
			background-color: #ffffff;
			margin: 10upx 0upx 0 0upx;
			padding: 25upx;


			.title-wrapper {
				display: flex;
				align-items: center;

				.icon {
					margin-right: 5upx;
				}

				.title {
					height: 34upx;
					line-height: 34upx;
					font-size: 34upx;
					color: #222222;
					padding-left: 10upx;
					border-left: 8upx solid #0E932E;
				}

				.value {
					flex: 1;
					text-align: left;
					font-size: 32upx;
					color: #666666;
				}

				.input {
					flex: 1;
					text-align: right;
					font-size: 32upx;
					color: #666666;
					margin-right: 10upx;
				}
			}



			.form-wrapper {
				padding: 0 20upx;

				.form-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 32upx;
					margin-top: 30upx;

					.form-label {
						color: #232323;
					}

					.form-value {
						color: #666666;
						flex: 1;
						text-align: left;
					}
				}
			}
		}

		.btn-wrapper {
			height: 100upx;
			background-color: #ffffff;
			margin-top: 40upx;
			margin-bottom: 100upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32upx;
			color: #222222;
		}
	}
</style>